<template>
  <div class="NavLayout">
      <ul>
        <li
          :class="layout.indexof === index?'current':''"
          v-for="(item,index) in layout.nav"
          :key="index"
          @click="layout.indexof = index"
        >{{item}}</li>
      </ul>
    </div>
</template>
<script>
export default {
  props:{
    layout:Object
  }
};
</script>
<style lang="scss" scoped>
.NavLayout {
  min-height: 100%;
  ul {
    font-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    li {
      display: inline-block;
      font-size: 14px;
      margin: 0 17px;
      padding: 13px 0;
      cursor: pointer;
      color: #333333;
      &:hover {
        color: #409EFF;
      }
      &.current {
        position: relative;
        font-weight: bold;
        color: #409EFF;
        &:after {
          position: absolute;
          content: "";
          bottom: 0;
          height: 2px;
          left: 0;
          right: 0;
          margin: 0 auto;
          background: #409EFF;
        }
      }
    }
  }
}
</style>